<template>
  <div
    class="container"
    @click="handleClick"
  >
    <div class="wrapper">
      <swiper :options="swiperOptions">
        <!-- slides -->
        <swiper-slide
          v-for="(item,index) of imgs"
          :key="index"
        >
          <img class="gallery-img" :src="item" alt="" />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <!--滚动条-->
        <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
      </swiper>
    </div>
  </div>
</template>

<script>
    export default {
      name: "CommonGallery",
      props:{
        imgs:{
          type:Array,
          default(){
            return []
          }
        }
      },
      data(){
        return{
          swiperOptions:{
            pagination:'.swiper-pagination',
            paginationType:'fraction',
            observeParents:true,
            observer:true
          }
        }
      },

      methods:{
        handleClick(){
          console.log(this.gallaryImgs);
          this.$emit('close');
        }
      }
    }
</script>

<style scoped lang="stylus">
  .container >>> .swiper-container
    overflow:inherit
  .container
    display: flex
    flex-direction:column
    justify-content:center
    position:fixed
    top:0
    left:0
    right:0
    bottom:0
    z-index:99
    background: #000
    .wrapper
      width: 100%
      height:0
      padding-bottom:100%
      .gallery-img
        width:100%
      .swiper-pagination
        color:#fff
        bottom:-1rem
</style>
